<!--
@Description:更多与关闭按钮
@Author:zqy
@Date:2022-10-20 20:40:01
@Last Modified by:zqy
@Last Modified time:2022-10-20 20:40:01
-->
<template>
  <div class="more-close" @click.stop>
    <img class="more" :src="moreSrc" @click="moreHandle">
    <p class="sep" :style="style" />
    <img class="close" :src="closeSrc" @click="closeHandle">
  </div>
</template>
<script>
import more from '@/assets/more.png'
import close from '@/assets/close.png'
import moreBlack from '@/assets/more_black.png'
import closeBlack from '@/assets/close_black.png'
export default {
  name: 'MoreClose',
  props: {
    black: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    moreSrc() {
      return this.black ? moreBlack : more
    },
    closeSrc() {
      return this.black ? closeBlack : close
    },
    style() {
      return this.black ? { backgroundColor: 'rgba(0,0,0,0.2)' } : { backgroundColor: 'rgba(255, 255, 255, 0.6)' }
    }
  },
  methods: {
    closeHandle() {
      this.$nativeHandler('closeWeb', {})
    },
    moreHandle() {
      this.$emit('more')
    }
  }
}
</script>
<style lang="less" scoped>
.more-close{
  width: 87px;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255,255,255,0.6);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  .more{
    flex: 0 0 auto;
    width: 19px;
    height: 7px;
  }
  .close{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
  }
  .sep{
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}
</style>
